<!DOCTYPE html>
<html style="height: 100%" lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入jquery -->
<script type="text/javascript"
	th:src="@{/ajax/libs/jquery/3.5.0/dist/jquery.min.js}"></script>
<!-- 引入 echarts.js -->
<script type="text/javascript"
	th:src="@{/ajax/libs/echarts/5.0.1/dist/echarts.min.js}"></script>
</head>

<body style="height: 100%; margin: 0">
	<div id="container" style="height: 100%"></div>


	<script type="text/javascript">
		var chartDom = document.getElementById('container');
		var myChart = echarts.init(chartDom);
		var option;

		option = {
			title : {
				text : '世界人口总量',
				subtext : '数据来自网络'
			},
			tooltip : {
				trigger : 'axis',
				axisPointer : {
					type : 'shadow'
				}
			},
			legend : {
				data : [ '2011年', '2012年' ]
			},
			grid : {
				left : '3%',
				right : '4%',
				bottom : '3%',
				containLabel : true
			},
			xAxis : {
				type : 'value',
				boundaryGap : [ 0, 0.01 ]
			},
			yAxis : {
				type : 'category',
				data : [ '巴西', '印尼', '美国', '印度', '中国', '世界人口(万)' ]
			},
			series : [ {
				name : '2011年',
				type : 'bar',
				data : [ 18203, 23489, 29034, 104970, 131744, 630230 ]
			}, {
				name : '2012年',
				type : 'bar',
				data : [ 19325, 23438, 31000, 121594, 134141, 681807 ]
			} ]
		};

		option && myChart.setOption(option);
	</script>
</body>
</html>